<template>
	<view class="w-100">
		<template v-if="!loadingState">
			<view class="flex-1 row" style="height: 500px;">
				<image :src="loadingImg" style="width: 100rpx;height: 100rpx;" mode=""></image>
			</view>
		</template>
		<template v-else>
			<view class="summary-box w-100">
				<view class="flex-1 row-ac py-3">
					<view class="row-a-j-fc flex-1">
						<view class="font-s-2">上交总额</view>
						<view class="font-s-7 mt-1"><text
								class="font-s-2 mr">¥</text>{{ statistics.accumulate_submission }}
						</view>
					</view>
					<view class="divider-line"></view>
					<view class="row-a-j-fc flex-1">
						<view class="font-s-2">团队总额</view>
						<view class="font-s-7 mt-1"><text
								class="font-s-2 mr">¥</text>{{ statistics.superior_sales_total }}
						</view>
					</view>
				</view>
				<view class="flex-1 row-ac py-2">
					<view class="row-a-j-fc flex-1">
						<view class="font-s-2">个人总收益</view>
						<view class="font-s-4 mt-1"><text
								class="font-s-2 mr">¥</text>{{ statistics.accumulate_revenue }}
						</view>
					</view>
					<view class="row-a-j-fc flex-1">
						<view class="font-s-2">本月收益</view>
						<view class="font-s-4 mt-1"><text
								class="font-s-2 mr">¥</text>{{ statistics.this_month_revenue }}
						</view>
					</view>
					<view class="row-a-j-fc flex-1">
						<view class="font-s-2">今日收益</view>
						<view class="font-s-4 mt-1"><text class="font-s-2 mr">¥</text>{{ statistics.today_revenue }}
						</view>
					</view>
				</view>
			</view>
			<view class="flex-1 mx-3 mt-3">
				<view class="flex-1 report-item mb-3 py-3" v-for="(item, index) in reportList" :key="index">
					<view class="flex-1 pb-2 mx-3 row-ac">
						<vidw class="flex-1 font-s-35">订单编号：{{ item.order_number }}</vidw>
						<view class="iconfont icon-sandian" style="color: #000;" @click="showDrawer('showLeft', item)">
						</view>
					</view>
					<view class="flex-1 row-ac-fw">
						<view class="report-box row-a-j-fc">
							<view class="font-s-2 text-muted">订单金额</view>
							<view class="font-s-4 mt-1">¥{{ item.order_amount }}</view>
						</view>
						<view class="report-box row-a-j-fc">
							<view class="font-s-2 text-muted">付款状态</view>
							<view class="font-s-4 mt-1">{{ item.payment_status == false ? '未付款' : '已付款' }}</view>
						</view>
						<view class="report-box row-a-j-fc">
							<view class="font-s-2 text-muted">订单用户</view>
							<view class="font-s-4 mt-1">{{ item.order_nickname }}</view>
						</view>
						<view class="report-box row-a-j-fc" v-if="item.user !== 2">
							<view class="font-s-2 text-muted">上交金额</view>
							<view class="font-s-4 mt-1">¥{{ item.submission_amount }}</view>
						</view>
						<view class="report-box row-a-j-fc" v-if="item.user !== 2">
							<view class="font-s-2 text-muted">个人利润</view>
							<view class="font-s-4 mt-1">¥{{ item.personal_profit }}</view>
						</view>
						<view class="report-box row-a-j-fc" v-if="item.user !== 2">
							<view class="font-s-2 text-muted">团队销售</view>
							<view class="font-s-4 mt-1">¥{{ item.team_sales }}</view>
						</view>
						<view class="report-box row-a-j-fc" v-if="item.order_user !== item.user">
							<view class="font-s-2 text-muted">收款金额</view>
							<view class="font-s-4 mt-1">¥{{ item.received_amount }}</view>
						</view>
						<view class="report-box row-a-j-fc" v-if="item.order_user !== item.user">
							<view class="font-s-2 text-muted">收款状态</view>
							<view class="font-s-4 mt-1">{{ item.receive_status | receiveFilter }}</view>
						</view>
						<view class="report-box row-a-j-fc" v-if="item.user !== 2">
							<view class="font-s-2 text-muted">上交状态状态</view>
							<view class="font-s-4 mt-1">{{ item.submission_status | submisFilter }}</view>
						</view>
					</view>
					<view class="flex-1 row-ac mt-3 mx-3">
						<view class="flex-1 font-s-2 text-muted">时间：{{ item.create_time }}</view>
						<view class="collection-box font-s-35 row" v-if="item.receive_status == 2"
							@click="revenuereportPatch(item)">确认收款</view>
					</view>
				</view>
			</view>
		</template>
		<!-- 左弹出 -->
		<view class="flex-1">
			<uni-drawer ref="showLeft" mode="left" :width="218" @change="change($event,'showLeft')">
				<view class="flex-1" style="height: 100%;">
					<view class="flex-1 row py-3 font-s-2 text-muted"></view>
					<scroll-view scroll-y class="flex-1" style="height: 80%;">
						<view class="flex-1 mx-5 row">总部</view>
						<view class="flex-1 mx-5 row-a-j-fc" v-for="(item, index) in superiorsList" :key="index"
							@click="takePhone(item)">
							<view class="iconfont icon-icon-test mt-6"
								:class="reachId == item.id ? 'font-w text-danger' : ''" style="font-size: 52rpx;">
							</view>
							<view class="row-ac">
								<image :src="item.head_image" class="head-image mr-1 border" mode=""></image>
								<view :class="reachId == item.id ? 'font-s-4 font-w text-danger' : 'font-s-35'">
									{{ item.nickname || item.username }}
								</view>
							</view>
							<view class="font-s-2" :class="reachId == item.id ? 'text-danger' : ''"
								v-if="reachId == item.id">(已收款)</view>

						</view>
						<view class="flex-1 mx-5 row-a-j-fc">
							<view class="iconfont icon-icon-test mt-6"
								:class="reachId == orderInfo.order_user ? 'font-w text-danger' : ''"
								style="font-size: 52rpx;"></view>
							<view class="row-ac mt-1">
								<image :src="orderInfo.order_head_image" class="head-image mr-1 border" mode=""></image>
								<view class="mt-1"
									:class="reachId == orderInfo.order_user ? 'font-s-4 font-w text-danger' : 'font-s-35'">
									{{ orderInfo.order_nickname || orderInfo.order_username }}
								</view>
							</view>
						</view>
					</scroll-view>
					<view class="flex-1 row py-3 font-s-2 text-muted">点击用户可以联系对方</view>
				</view>
			</uni-drawer>
		</view>
	</view>
</template>

<script>
	import {
		revenuereportListUrl,
		revenuestatisticsUrl,
		revenuereportPatchUrl,
		distributorsDetailUrl,
		userInfoUrl,
		superiorsListUrl
	} from "@/api/index.js"
	export default {
		data() {
			return {
				loadingState: false,
				loadingImg: '../../static/img/loading.gif',
				showLeft: false,
				queryInfo: {
					page: 1,
					page_size: 10
				},
				reportList: [],
				statistics: {
					accumulate_submission: 0,
					superior_sales_total: 0,
					accumulate_revenue: 0,
					this_month_revenue: 0,
					today_revenue: 0
				},
				FormData: {
					receive_status: ''
				},
				superiorsQueryInfo: {
					userId: ''
				},
				distributorsDetail: '',
				userInfo: '',
				reachId: 6,
				superiorsList: [],
				orderInfo: {
					order_user: '',
					order_username: '',
					order_nickname: '',
					order_head_image: ''
				},
				aabb: [{
						'id': 917,
						'product': {
							'id': 8,
							'product_name': '奢养臻颜美肌贵妇膏',
						},
						'quantity': 1,
						'spec': '',
					},
					{
						'id': 918,
						'product': {
							'id': 33,
							'product_name': '奢养臻颜美肌贵妇膏aaa',
						},
						'quantity': 1,
						'spec': '#101象牙白',
					},
					{
						'id': 919,
						'product': {
							'id': 8,
							'product_name': '奢养臻颜美肌贵妇膏bbbbb',
						},
						'quantity': 2,
						'spec': '',
					},
				]

			}
		},
		filters: {
			receiveFilter(status) {
				if (status === 0) {
					return '未收款'
				} else if (status === 1) {
					return '已收款'
				} else if (status === 2) {
					return '收款中'
				}
			},
			submisFilter(status) {
				if (status === 0) {
					return '未上交'
				} else if (status === 1) {
					return '已上交'
				} else if (status === 2) {
					return '上交中'
				}
			},
		},
		onLoad() {
			this.init()
			setTimeout(() => {
				this.loadingState = true;
			}, 3000);
		},
		nNavigationBarButtonTap(e) {
			if (this.showLeft) {
				this.$refs.showLeft.close()
			} else {
				this.$refs.showLeft.open()
			}
		},
		// app端拦截返回事件 ，仅app端生效
		onBackPress() {
			if (this.showRight || this.showLeft) {
				this.$refs.showLeft.close()
				this.$refs.showRight.close()
				return true
			}
		},
		created() {
			this.getDistributorsDetail()
			this.getUserInfo()
		},
		onReachBottom() {
			this.onReachBottomHandle();
		},
		methods: {
			init() {
				this.getRevenuereportList()
				this.getRevenueStatistics()
			},
			getUserInfo() {
				this.$R.get(userInfoUrl).then(res => {
					this.userInfo = res.data
				})
			},
			getRevenuereportList() {
				this.$R.get(revenuereportListUrl, this.queryInfo).then(res => {
					if (res.code == 200) {
						this.reportList = res.data.list
						this.reportTotal = res.data.total
					}

				})
			},
			onReachBottomHandle() {
				// 触底事件
				if (this.reportTotal != this.reportList.length) {
					this.queryInfo.page_size += 10;
					this.getRevenuereportList()
				}
			},
			getRevenueStatistics() {
				this.$R.get(revenuestatisticsUrl).then(res => {
					this.statistics = res.data
				})
			},
			getDistributorsDetail() {
				this.$R.get(distributorsDetailUrl).then(res => {
					this.distributorsDetail = res.data
				})
			},
			revenuereportPatch(item) {
				if (this.userInfo.id == 2) {
					uni.showModal({
						title: '提示',
						content: '是否已经收到上交款?',
						confirmText: '确认收款',
						success: (res) => { // 使用箭头函数
							if (res.confirm) {
								this.FormData.receive_status = 1
								this.$R.patch(
										revenuereportPatchUrl +
										item
										.id + '/', this.FormData)
									.then(
										res => {
											uni.showToast({
												title: '收款成功',
												icon: 'none'
											});
											this.getRevenuereportList()
											this.getRevenueStatistics()
										})
							} else if (res.cancel) {
								console.log('取消');
							}
						}
					});
				} else {
					uni.showModal({
						title: '提示',
						content: '是否已经收到上交款？如已收到' + item
							.receive_nickname +
							'的上交款，您确认收款后，您需要向您上级' + this
							.distributorsDetail.leader_nickname +
							'上交款项，是否确认收款',
						confirmText: '确认收款',
						success: (res) => { // 使用箭头函数
							if (res.confirm) {
								this.FormData.receive_status = 1
								this.$R.patch(
										revenuereportPatchUrl +
										item
										.id + '/', this.FormData)
									.then(
										res => {
											uni.showToast({
												title: '收款成功',
												icon: 'none'
											});
											this.getRevenuereportList()
										})
							} else if (res.cancel) {
								console.log('取消');
							}
						}
					});
				}
			},
			takePhone(item) {
				uni.showModal({
					title: '提示',
					content: '是否拨打' + item.nickname + '电话?',
					confirmText: '拨打电话',
					success: (res) => {
						if (res.confirm) {
							uni.makePhoneCall({
								phoneNumber: item.phone
							});
						}
					}
				})
			},
			// 打开窗口
			showDrawer(e, item) {
				this.$refs[e].open()
				this.superiorsQueryInfo.userId = item.order_user
				this.reachId = item.order_superior_user
				this.orderInfo.order_user = item.order_user
				this.orderInfo.order_username = item.order_username
				this.orderInfo.order_nickname = item.order_nickname
				this.orderInfo.order_head_image = item.order_head_image
				this.$R.get(superiorsListUrl, this.superiorsQueryInfo).then(
					res => {
						if (res.code == 200) {
							this.superiorsList = res.data.list
						}
					})
			},
			// 关闭窗口
			closeDrawer(e) {
				this.$refs[e].close()
			},
			// 抽屉状态发生变化触发
			change(e, type) {
				this[type] = e
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.summary-box {
		height: 310rpx;
		background-color: #f5f5f5;
		color: #333;

		.divider-line {
			width: 1rpx;
			height: 60rpx;
			background-color: #fff;
		}
	}

	.report-item {
		background-color: #f5f5f5;

		.report-box {
			width: 33.333%;
			height: 120rpx;
		}

		.collection-box {
			width: 160rpx;
			height: 62rpx;
			background-color: #000;
			color: #fff;
		}
	}

	.head-image {
		width: 48rpx;
		height: 48rpx;
		border-radius: 50%;
	}
</style>